realizzazione di una tabella con una barra di scroll verticale. Potrebbe tornarci utile quando dobbiamo stampare a video una moltitudine di dati estratti da un database o da usare anche in una pagina statica html. Invece di "intasare" la pagina o vedere una kilometrica barra verticale di scroll alla destra della finestra del browser, possiamo "comprimere" la suddetta tabella e mostrare in ogni caso tutti i dati. Una tabella realizzata in questo modo permette a coloro che usano screen reader o altri programmi lettori di schermo, di poter fruire della pagina alle stesse condizioni di un utente normodotato. Il presente articolo potremmo definirlo una "estensione" di un altro, precedentemente scritto sempre nella sezione css dal titolo "Realizzare una tabella accessibile".
Le tabelle in teoria
Fatta questa premessa, passiamo a vedere in linea "teorica" come deve essere sviluppata la tabella. Effettivamente ce ne servono due più un elemento di blocco al quale verrà assegnata una altezza e, sempre a tale box, assegneremo la proprietà: overflow:auto.
La tabella esterna
Come scritto più su, avremo bisogno di due tabelle. Una esterna, che fa da contenitore, che chiameremo tabellauno; una interna che avrà come nome tabelladue; ed infine un elemento di blocco dal nome divinterno. Cominciamo con il codice della tabella esterna.
.tabellauno {
width:660px;
margin:0 auto;
padding:0;
background:#00a3dd;
color:#fff;
}
.tabellauno th#header1, .tabellauno th#header2, .tabellauno th#header3 {
width:220px;
text-align:left;
padding-left:0.5em;
}
.tabellauno caption {
background:#fff;
color:#000;
font-size:1.2em;
margin:0 auto;
}
.tabellauno tbody {
background:#8a9;
color:#000;
}
.tabellauno td {
text-align: left;
}
Se diamo uno sguardo alla tabella così come l´abbiamo formattata attraverso il codice css, avremo una tabella con il colore di sfondo verde. Colore dei bordi, colore della intestazione e del footer: celeste.
La tabella interna
La tabella appena vista è perfettamente funzionale ed accessibile. Ovviamente i colori sono puramente indicativi e possiamo cambiarli a nostro piacimento. Adesso dobbiamo introdurre la seconda tabella; lo faremo anche per "distinguere" il colore di ogni singolo rigo dal precedente, per una migliore leggibilità. Il suo codice è il seguente:
.tabelladue {
margin:0;
padding:0;
color:#000;
background: transparent;
}
.tabelladue td {
background:#e5e5e5;
color:#000;
padding-left:10px;
width:220px;
}
.tabelladue tr.colorata td {
background:#ccc;
color:#000;
}
Questo codice ci permette di avere quanto ci siamo prefissi: righe colorate alterne. Infatti nel foglio di stile andiamo a dichiarare che le celle [ td ] avranno un colore grigio molto tenue [ background:#e5e5e5; ]. Per fare in modo che tutta la riga successiva possa assumere un altro colore, dichiariamo attraverso una classe [ .tabelladue tr.colorata td ], un secondo colore di sfondo: background:#ccc;.
L´elemento div
Adesso siamo giunti ad introdurre l´ultimo elemento: il div che farà apparire la barra di scroll; tale elemento lo dichiariamo con una classe; il suo codice è:
.divinterno {height:7em; overflow:auto;}
La tabella che dobbiamo inscrivere in tale elemento è la tabella interna. Altrimenti non avremmo l´effetto desiderato; siccome, si presume, che i dati in essa contenuti saranno molti di più della sua altezza, cioè 7em, ecco apparire la barra di scroll verticale. . Nel caso in cui avessimo più dati e volessimo aumentare l´altezza della tabella, basta intervenire sul codice del divinterno, modificando la sua height da 7em a quanto è necessario.
Stampa 
